<template>
  <el-container>
    <el-header class="header">
      <div class="left">
        <div class="group">
          <span>驻场人员姓名：</span>
          <el-input class="com-input" placeholder="请输入驻场人员姓名" v-model="userName" />
          <span>驻场人员手机号：</span>
          <el-input class="com-input" placeholder="请输入驻场人员手机号" v-model="mobile" />
        </div>
        <div class="group">
          <span class="text">地区：</span>
          <user-address ref="userfileAddress" />
        </div>
      </div>
      <div class="right">
        <el-button type="primary" @click="search" icon="el-icon-search" class="btn">查询</el-button>
        <el-button type="primary" @click="addCom" class="btn">新增驻场人员</el-button>
      </div>
    </el-header>
  </el-container>
</template>
<script>
import UserAddress from "../../../../components/address";
export default {
  name: "doctorOptions",
  data() {
    return {
      userName: "", //驻场人员姓名
      mobile: "", //驻场人员手机号
    };
  },
  components: {
    UserAddress
  },
  methods: {
    addCom() {
      this.$router.push("addUserfiled?type=add");
    },
    search(){
      this.$emit("search");
    },
    getData(){
      let params = {
        userName: this.userName, 
        mobile: this.mobile
      }
      return this.lodash.assign({}, params, this.$refs.userfileAddress.getData());
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./../../../../assets/less/color.less");
.header {
  display: flex;
  text-align: left;
  border-bottom: 1px solid @border-gray;
  height: inherit !important;
  padding-bottom: 10px;
  flex-wrap: wrap;  
  .group {
    padding: 10px;    
    display: flex;
    align-items: center;
    &:first-child{
      padding-top: 0;
    }
    .section {
      display: inline-block;
      text-indent: 4.5em;
    }
    .text {
      display: inline-block;
      text-indent: 4em;
      min-width: 112px;
    }
  }
  .com-input {
    width: 210px;
    margin-right: 20px;
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 20px;
    }
  }
}
</style>